<template>
    <div class="product">
        <div class="box1">
            <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
                <el-menu-item index="1">我的订单</el-menu-item>

                <el-sub-menu index="2">
                    <template #title>我的京东</template>
                    <el-menu-item index="2-1">
                        <div class="item-box">待处理订单</div>
                        <div class="item-box">我的问答</div>
                    </el-menu-item>
                    <el-menu-item index="2-2">
                        <div class="item-box">返修退换货</div>
                        <div class="item-box">我的关注</div>
                    </el-menu-item>
                    <el-menu-item index="2-3">
                        <div class="item-box">降价商品</div>
                        <div class="item-box">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    </el-menu-item>
                    <el-menu-item index="2-4">
                        <div class="item-box">我的京豆</div>
                        <div class="item-box">我的优惠卷</div>
                    </el-menu-item>
                    <el-menu-item index="2-5">
                        <div class="item-box">我的白条</div>
                        <div class="item-box">我的理财</div>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="3">
                    <template #title>企业采购</template>
                    <el-menu-item index="3-1">
                        <div class="item-box">企业购</div>
                        <div class="item-box">公共采购</div>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <div class="item-box">工业品</div>
                        <div class="item-box">商用场景馆</div>
                    </el-menu-item>
                    <el-menu-item index="3-3">
                        <div class="item-box">礼品卡</div>
                        <div class="item-box">微信企业购</div>
                    </el-menu-item>
                    <el-menu-item index="3-4">
                        <div class="item-box">工品优选</div>
                        <div class="item-box">京东锦礼</div>
                    </el-menu-item>
                    <el-menu-item index="3-5">
                        <div class="item-box">大中型客户采购</div>
                        <div class="item-box"></div>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="4">
                    <template #title>客户服务</template>

                    <div style="color: #fff;font-weight: bolder;margin-left: 10px;font-size: 14px;">客户</div>

                    <el-menu-item index="4-1">
                        <div class="item-box">帮助中心</div>
                        <div class="item-box">售后服务</div>
                    </el-menu-item>
                    <el-menu-item index="4-2">
                        <div class="item-box">在线客服</div>
                        <div class="item-box">意见建议</div>
                    </el-menu-item>
                    <el-menu-item index="4-3">
                        <div class="item-box">电话客服</div>
                        <div class="item-box">客服邮箱</div>
                    </el-menu-item>
                    <el-menu-item index="4-4">
                        <div class="item-box">金融咨询</div>
                        <div class="item-box">全球售客服</div>
                    </el-menu-item>
                    <el-menu-item index="4-5">
                        <div class="item-box">企业客服</div>
                        <div class="item-box"></div>
                    </el-menu-item>

                    <div style="color: #fff;font-weight: bolder;margin-left: 10px;font-size: 14px;">商户</div>

                    <el-menu-item index="4-6">
                        <div class="item-box">合作招商</div>
                        <div class="item-box">学习中心</div>
                    </el-menu-item>
                    <el-menu-item index="4-7">
                        <div class="item-box">商家后台</div>
                        <div class="item-box">京麦工作台</div>
                    </el-menu-item>
                    <el-menu-item index="4-8">
                        <div class="item-box">商家帮助</div>
                        <div class="item-box">规则平台</div>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="5">
                    <template #title>网站导航</template>
                    <div style="display: flex;">
                        <div style="border: 1px solid red;width: 50%;">1</div>
                        <div style="border: 1px solid red;width: 50%;">2</div>
                        <div style="border: 1px solid red;width: 50%;">3</div>
                        <div style="border: 1px solid red;width: 50%;">4</div>
                    </div>
                </el-sub-menu>

                <el-sub-menu index="6">
                    <template #title>手机京东</template>
                    <el-menu-item index="6-1" style="height: 141px;"><img
                            src="../assets/3a66125f9efe8c92c92033e947e66a7.png" alt=""></el-menu-item>
                    <el-menu-item index="6-2" style="height: 141px;"><img
                            src="../assets/3a66125f9efe8c92c92033e947e66a7.png" alt=""></el-menu-item>
                    <el-menu-item index="6-3" style="height: 141px;"><img
                            src="../assets/3a66125f9efe8c92c92033e947e66a7.png" alt=""></el-menu-item>

                </el-sub-menu>

                <el-menu-item index="7">网络无障碍</el-menu-item>
            </el-menu>
        </div>
    </div>

    <div class="box2">
        <div class="box2-left"><img src="https://i-1.lanrentuku.com/2020/12/29/f534d12a-7cae-4b60-80e3-08abdfc87391.jpg"
                alt="">京东</div>
        <div class="box2-right">
            <input type="text">
            <button>搜索</button>
        </div>
    </div>

    <div class="box3">
        <div class="box3-left">全部商品 ({{ count }})</div>
        <div class="box3-right"></div>
        <div>配送至：
            <el-cascader :options="options" clearable></el-cascader>
        </div>
    </div>

    <div class="box4">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="序号" width="150" />
            <el-table-column prop="name" label="商品名称" width="120" />
            <el-table-column prop="specs" label="规格" width="120" />
            <el-table-column prop="price" label="单价" width="120" />
            <el-table-column prop="num" label="数量" width="200" />
            <el-table-column prop="totalprice" label="小计金额" width="120" />
            <el-table-column label="操作" width="120">
                <template #default>
                    <el-button link type="danger" size="small" @click="handc" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handc = () => {
    console.log('click');
}
const options = [
    {
        value: 'city',
        label: '常用地址',
        children: [
            {
                value: 'contey',
                label: '韩江委 天平湖路与横三路交叉口东南140米顺丰速运'
            }
        ]
    },
    {
        value: 'guide',
        label: '山东省',
        children: [
            {
                value: 'disciplines',
                label: '枣庄市',
                children: [
                    {
                        value: 'consistency',
                        label: '市中区',
                    },
                    {
                        value: 'feedback',
                        label: '台儿庄区',
                    },
                    {
                        value: 'efficiency',
                        label: '薛城区',
                    },
                    {
                        value: 'controllability',
                        label: '峄城区',
                    },
                    {
                        value: 'controllability',
                        label: '山亭区',
                    },
                    {
                        value: 'controllability',
                        label: '滕州市',
                    }
                ],
            },
            {
                value: 'navigation',
                label: '泰安市',
                children: [
                    {
                        value: 'side nav',
                        label: '泰山区',
                    },
                    {
                        value: 'top nav',
                        label: '岱岳区',
                    },
                ],
            },
        ],
    },
    {
        value: 'component',
        label: '河南省',
        children: [
            {
                value: 'basic',
                label: 'Basic',
                children: [
                    {
                        value: 'layout',
                        label: 'Layout',
                    },
                    {
                        value: 'color',
                        label: 'Color',
                    },
                    {
                        value: 'typography',
                        label: 'Typography',
                    },
                    {
                        value: 'icon',
                        label: 'Icon',
                    },
                    {
                        value: 'button',
                        label: 'Button',
                    },
                ],
            },
            {
                value: 'form',
                label: 'Form',
                children: [
                    {
                        value: 'radio',
                        label: 'Radio',
                    },
                    {
                        value: 'checkbox',
                        label: 'Checkbox',
                    },
                    {
                        value: 'input',
                        label: 'Input',
                    },
                    {
                        value: 'input-number',
                        label: 'InputNumber',
                    },
                    {
                        value: 'select',
                        label: 'Select',
                    },
                    {
                        value: 'cascader',
                        label: 'Cascader',
                    },
                    {
                        value: 'switch',
                        label: 'Switch',
                    },
                    {
                        value: 'slider',
                        label: 'Slider',
                    },
                    {
                        value: 'time-picker',
                        label: 'TimePicker',
                    },
                    {
                        value: 'date-picker',
                        label: 'DatePicker',
                    },
                    {
                        value: 'datetime-picker',
                        label: 'DateTimePicker',
                    },
                    {
                        value: 'upload',
                        label: 'Upload',
                    },
                    {
                        value: 'rate',
                        label: 'Rate',
                    },
                    {
                        value: 'form',
                        label: 'Form',
                    },
                ],
            },
            {
                value: 'data',
                label: 'Data',
                children: [
                    {
                        value: 'table',
                        label: 'Table',
                    },
                    {
                        value: 'tag',
                        label: 'Tag',
                    },
                    {
                        value: 'progress',
                        label: 'Progress',
                    },
                    {
                        value: 'tree',
                        label: 'Tree',
                    },
                    {
                        value: 'pagination',
                        label: 'Pagination',
                    },
                    {
                        value: 'badge',
                        label: 'Badge',
                    },
                ],
            },
            {
                value: 'notice',
                label: 'Notice',
                children: [
                    {
                        value: 'alert',
                        label: 'Alert',
                    },
                    {
                        value: 'loading',
                        label: 'Loading',
                    },
                    {
                        value: 'message',
                        label: 'Message',
                    },
                    {
                        value: 'message-box',
                        label: 'MessageBox',
                    },
                    {
                        value: 'notification',
                        label: 'Notification',
                    },
                ],
            },
            {
                value: 'navigation',
                label: 'Navigation',
                children: [
                    {
                        value: 'menu',
                        label: 'Menu',
                    },
                    {
                        value: 'tabs',
                        label: 'Tabs',
                    },
                    {
                        value: 'breadcrumb',
                        label: 'Breadcrumb',
                    },
                    {
                        value: 'dropdown',
                        label: 'Dropdown',
                    },
                    {
                        value: 'steps',
                        label: 'Steps',
                    },
                ],
            },
            {
                value: 'others',
                label: 'Others',
                children: [
                    {
                        value: 'dialog',
                        label: 'Dialog',
                    },
                    {
                        value: 'tooltip',
                        label: 'Tooltip',
                    },
                    {
                        value: 'popover',
                        label: 'Popover',
                    },
                    {
                        value: 'card',
                        label: 'Card',
                    },
                    {
                        value: 'carousel',
                        label: 'Carousel',
                    },
                    {
                        value: 'collapse',
                        label: 'Collapse',
                    },
                ],
            },
        ],
    },
    {
        value: 'resource',
        label: '河北省',
        children: [
            {
                value: 'axure',
                label: 'Axure Components',
            },
            {
                value: 'sketch',
                label: 'Sketch Templates',
            },
            {
                value: 'docs',
                label: 'Design Documentation',
            },
        ],
    },
]
const tableData = [
    {id:1,name:'商品1',specs:['big','small'],price:100,num:1,totalprice:100},
    {id:2,name:'商品1',specs:['big','small'],price:200,num:2,totalprice:400},
    {id:3,name:'商品1',specs:['big','small'],price:300,num:3,totalprice:900},
    {id:4,name:'商品1',specs:['big','small'],price:400,num:4,totalprice:1600},
]
</script>

<style scoped lang="scss">
.product {
    background-color: #99999a;
}

.box1 {
    width: 70%;
    margin: auto;
}

.el-menu-demo {
    margin-top: 20px;
    background-color: #99999a;
}

.el-menu-item {
    display: flex;
    justify-content: space-between;

    .item-box {
        width: 80px;
    }

}

.el-menu--popup-bottom-start {
    display: flex;
    border: 1px solid red;
}

.box2 {
    width: 70%;
    margin: auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;

    .box2-left {
        color: #dd261f;
        font-weight: bolder;
        font-size: 40px;

        img {
            width: 65px;
            height: 65px;
        }
    }

    .box2-right {
        padding-top: 10px;
        position: relative;

        input {
            height: 20px;
            width: 240px;
            outline: none;

            border: 2px solid#c51f26;
        }

        button {
            background-color: #c51f26;
            color: #fff;
            border: none;
            width: 40px;
            height: 26px;
            position: absolute;
            right: 0;
        }
    }
}

.box3 {
    width: 70%;
    margin: auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;

    .box3-left {
        color: #dd261f;
        font-size: 18px;
        font-weight: bolder;
    }
}
.box4{
    width: 70%;
    margin: auto;
}
</style>